//
// email.scss
//

.email-container {
  margin-bottom: $grid-gutter-width;
  background-color: $card-bg;
  .inbox-leftbar {
    float: left;
    width: 250px;
    padding: $card-spacer-x;
    // padding: 0 20px 20px 10px;
    padding-bottom: 184px;
    margin-bottom: -184px;
  }

  .inbox-rightbar {
    padding: 0 0 1.5rem 25px;
    margin-left: 250px;
    border-left: 5px solid $body-bg;
  }
}

.message-list {
  display: block;
  padding-left: 0;

  li {
    position: relative;
    display: block;
    height: 48px;
    margin-bottom: 1px;
    line-height: 48px;
    cursor: default;
    background: $card-bg;
    box-shadow: $box-shadow-sm;
    transition-duration: 0.3s;

    a {
      color: $gray-700;
    }

    &:hover {
      box-shadow: $box-shadow;
      transition-duration: 0.05s;
    }

    .col-mail {
      position: relative;
      float: left;
    }

    .col-mail-1 {
      width: 320px;

      .star-toggle,
      .checkbox-wrapper-mail,
      .dot {
        display: block;
        float: left;
      }

      .dot {
        width: 0;
        height: 0;
        margin: 22px 26px 0;
        font-size: 0;
        line-height: 0;
        border: 4px solid transparent;
        border-radius: 100px;
      }

      .checkbox-wrapper-mail {
        margin: 15px 10px 0 20px;
      }

      .star-toggle {
        margin-left: 10px;
        color: $gray-500;
      }

      .title {
        position: absolute;
        top: 0;
        right: 0;
        left: 100px;
        margin-bottom: 0;
        overflow: hidden;
        line-height: 50px;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }

    .col-mail-2 {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 320px;

      .subject,
      .date {
        position: absolute;
        top: 0;
      }

      .subject {
        right: 110px;
        left: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .date {
        right: 0;
        width: 100px;
        padding-left: 10px;
      }
    }
  }

  li.active,
  li.mail-selected {
    background: $gray-100;
    transition-duration: 0.05s;
  }

  li.active,
  li.active:hover {
    box-shadow: inset 3px 0 0 $cyan;
  }

  li.unread a {
    // font-weight: $font-weight-semibold;
    color: darken($dark, 5%);
  }

  .checkbox-wrapper-mail {
    position: relative;
    display: inline-block;
    width: 20px;
    height: 20px;
    cursor: pointer;
    border-radius: 3px;
    box-shadow: inset 0 0 0 2px $gray-400;

    input {
      cursor: pointer;
      opacity: 0;
    }

    input:checked ~ label {
      opacity: 1;
    }

    label {
      position: absolute;
      top: 3px;
      right: 3px;
      bottom: 3px;
      left: 3px;
      margin-bottom: 0 !important;
      cursor: pointer;
      background: $gray-600;
      opacity: 0;
      transition-duration: 0.05s;
    }

    label:active {
      background: #87949b;
    }
  }
}

.mail-list {
  a {
    display: block;
    padding: 7px 10px;
    color: $gray-700;
  }
}

.reply-box {
  border: 2px solid $light;
}

@media (max-width: 648px) {
  .email-container {
    .inbox-leftbar {
      float: none;
      width: 100%;
      padding-bottom: 1.25rem;
      margin-bottom: 21px;
    }

    .inbox-rightbar {
      padding-left: 0;
      margin-left: 0;
      border: 0;
    }
  }
}

@media (max-width: 520px) {
  .inbox-rightbar {
    > .btn-group {
      margin-bottom: 10px;
    }
  }

  .message-list li {
    .col-mail-1 {
      width: 150px;

      .title {
        left: 80px;
      }
    }

    .col-mail-2 {
      left: 160px;

      .date {
        padding-right: 10px;
        padding-left: 20px;
        text-align: right;
      }
    }
  }
}

.chatbox {
  position: fixed;
  right: 35px;
  bottom: 10px;
  z-index: 99;
  width: 300px;
  background-color: $card-bg;
  border-radius: $border-radius;
  box-shadow: $box-shadow;

  .chat-input {
    .form-control {
      padding-right: 60px;
    }
  }

  .chat-link {
    position: absolute;
    top: 10px;
    right: 4px;
  }
}
